<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>政务数据资产普查系统</title>
<link rel="stylesheet" href="../../public/libs/layui/css/layui.css">
<link rel="stylesheet" href="../../public/css/main.css">
<link rel="stylesheet" href="//at.alicdn.com/t/font_540221_mtvfb4bu66y4aemi.css">
</head>

<body>
    <div class="menu_content" id="layerwrap">

        <div class="layui-form-item">
            <div class="layui-input-inline">
                <button class="layui-btn" data-method="notice" data-type="addform" data-title="数据元新增" @click="addButton(0, '顶级菜单')">
                    <i class="mine-icon">&#xe6d2;</i>新增
                </button>
            </div>
        </div>
        <div id="menu"></div>

        <!-- 新增 -->
        <div id="edit_layer" style="display: none">
            <form id="edit_form" class="layui-form" action="">
                <input type="hidden" name="parentId" v-model="formList.parentId" />
                <div class="layui-form-item">
                    <input type="hidden" name="id" v-model="formList.id">
                    <label class="layui-form-label">上级菜单</label>
                    <div class="layui-input-block">
                        <input type="hidden" name="parentId" v-model="formList.parentId">
                        <input type="text" name="parentName" lay-verify="required" autocomplete="off" placeholder="请输入标题" class="layui-input" v-model="formList.parentName" onclick="menuChosenSelect(this)">
                    </div>
                </div>
                <div class="layui-form-item">
                    <input type="hidden" name="id" v-model="formList.id">
                    <label class="layui-form-label">名称</label>
                    <div class="layui-input-block">
                        <input type="text" name="name" lay-verify="required" autocomplete="off" placeholder="请输入标题" class="layui-input" v-model="formList.name">
                    </div>
                </div>
                <div class="layui-form-item">
                    <input type="hidden" name="id" v-model="formList.id">
                    <label class="layui-form-label">图标</label>
                    <div class="layui-input-block">
                        <input type="text" name="icon" lay-verify="required" autocomplete="off" placeholder="请输入标题" class="layui-input" v-model="formList.icon">
                    </div>
                </div>
                <div class="layui-form-item">
                    <input type="hidden" name="id" v-model="formList.id">
                    <label class="layui-form-label">链接</label>
                    <div class="layui-input-block">
                        <input type="text" name="url" lay-verify="required" autocomplete="off" placeholder="请输入标题" class="layui-input" v-model="formList.url">
                    </div>
                </div>
                <div class="layui-form-item">
                    <input type="hidden" name="id" v-model="formList.id">
                    <label class="layui-form-label">类型</label>
                    <div class="layui-input-block">
                        <!-- <input type="text" name="type" lay-verify="required" autocomplete="off" placeholder="请输入标题" class="layui-input" v-model="formList.type"> -->
                        <select name="type" lay-verify="required" lay-search="" v-model="formList.type">
                            <option value="">== 请选择 ==</option>
                             <option value="0">目录</option>
                             <option value="1">菜单</option>
                             <option value="2">按钮</option>
                          <!--   <option v-for="item in selectList.menu_type" :key="item.id" :value="item.value">{{item.name}}</option> -->
                        </select>
                    </div>
                </div>
                <div class="layui-form-item">
                    <input type="hidden" name="id" v-model="formList.id">
                    <label class="layui-form-label">权限规则</label>
                    <div class="layui-input-block">
                        <input type="text" name="permission" lay-verify="required" autocomplete="off" placeholder="请输入标题" class="layui-input" v-model="formList.permission">
                    </div>
                </div>
                <div class="layui-form-item">
                    <input type="hidden" name="id" v-model="formList.id">
                    <label class="layui-form-label">排序</label>
                    <div class="layui-input-block">
                        <input type="text" name="sort" lay-verify="required" autocomplete="off" placeholder="请输入标题" class="layui-input" v-model="formList.sort">
                    </div>
                </div>
                <div class="layui-form-item">
                    <button v-show="buttonDisp" class="layui-btn layui-submit" lay-submit="" lay-filter="form_submit">立即提交</button>
                </div>
            </form>
        </div>

        <form class="layui-form menu-chosen-modules" style="display: none;">
            <menu-chosen></menu-chosen>
        </form>

    </div>
</body>
<script src="../../public/libs/jquery-2.1.1.min.js"></script>
<script src="../../public/libs/layui/layui.js"></script>
<script src="../../public/libs/vue.js"></script>
<script src="../../components/menuChosen.js"></script>
<script type="text/javascript">

    var vm = new Vue({
        el:'.menu_content',
        data: {
            requestType: 'post',
            layout: [
                { name: '菜单名称', treeNodes: true, headerClass: 'value_col', colClass: 'value_col', style: '' },
                { name: '排序', render: function (row) {return row.sort} },
                {
                    name: '操作',
                    headerClass: 'value_col',
                    colClass: 'value_col',
                    style: 'width: 280px',
                    render: function(row) {
                        var html = '';
                        html += '<a class="layui-btn layui-btn-sm" onclick="vm.addSonButton(' + row.id + ', \'' + row.name + '\')"><i class="layui-icon">&#xe60a;</i> 添加子级菜单</a>'
                        html += '<a class="layui-btn layui-btn-sm" onclick="vm.editButton(' + row.id + ')"><i class="layui-icon">&#xe642;</i> 修改</a>'
                        html += '<a class="layui-btn layui-btn-danger layui-btn-sm" onclick="vm.deleteButton(' + row.id + ')"><i class="layui-icon">&#xe640;</i> 删除</a>'
                        return html;
                    }
                },
            ],
            node: [],
            buttonDisp: true,
            formList: {
                parentId: '',
                parentName: '',
                id: '',
                name: '',
                icon: '',
                url: '',
                type: '',
                permission: '',
                sort: ''
            },
            selectList: parent.vm.selectList,
        },
        methods: {
            initWeb () {
                layui.use(['tree', 'layer'], function() {
                    var layer = layui.layer;
                    $.ajax({
                        url: '/menu/list',
                        success: function (res) {
                            vm.node = res.data;
                            $('#menu').html('').removeClass('layui-tree')
                            layui.treeGird({
                                elem: '#menu', //传入元素选择器
                                // spreadable: true, //设置是否全展开，默认不展开
                                nodes: res.data,
                                layout: vm.layout
                            });
                        }
                    })
                });
            },
            refreshData () {
                for (var i in vm.formList) {
                    vm.formList[i] = ''
                }
            },
            validate () {
                layui.use(['form', 'layedit', 'laydate'], function(){
                    form = layui.form
                    ,layer = layui.layer
                    ,layedit = layui.layedit
                    ,laydate = layui.laydate;

                    form.verify({
                        title: function(value){
                            if(value.length < 5){
                                return '标题至少得5个字符啊';
                            }
                        }
                        ,pass: [/(.+){6,12}$/, '密码必须6到12位']
                        ,content: function(value){
                            layedit.sync(editIndex);
                        }
                    });
                    form.on('submit(form_submit)', function(data){
                        $.ajax({
                            url: '/menu',
                            data: data.field,
                            type: vm.requestType,
                            success: function (res) {
                                vm.initWeb();
                                vm.refreshData();
                                vm.requestType = 'post';
                                layer.close(layeForm)
                            }
                        })
                        return false;
                    });
                })
            },
            addButton (pId, name) {
                if (name != undefined) {
                    vm.formList.parentId = pId;
                    vm.formList.parentName = name;
                }
                this.getSelect('edit_form')
                form.render()
                layui.use('layer', function(){
                    layeForm = layer.open({
                        title: '新增',
                        type : 1,
                        area : [ '80%', '80%' ],
                        scrollbar : false,
                        zIndex : 100,
                        cancel: function () {
                            vm.refreshData();
                            vm.buttonDisp = true;
                        },
                        content : $('#edit_layer')
                    });
                });
            },
            addSonButton (id, name) {
                vm.formList.parentId = id;
                vm.formList.parentName = name;
                this.addButton();
            },
            editButton (id) {
                vm.requestType = 'put';
                vm.findNode(id, vm.node)
                vm.formList.parentName == null ? vm.formList.parentName = '顶级菜单' : '';
                this.addButton();
            },
            deleteButton (id) {
                var ids = [];
                ids.push(id)
                layui.use('layer', function(){
                    layeConfirm = layer.confirm('您确定要删除么？', {
                        btn : [ '确定', '取消' ]
                    }, function() {
                        $.ajax({
                            url: '/menu',
                            data: JSON.stringify(ids),
                            contentType: "application/json; charset=utf-8",
                            dataType: "json",
                            type: 'delete',
                            success: function (res) {
                                layer.close(layeConfirm)
                                vm.initWeb();
                                vm.delIds = [];
                            }
                        })
                    });
                });
            },
            findNode (id, list) {
                for (let i in list) {
                    if (list[i].id == id) {
                        for (var m in vm.formList) {
                            vm.formList[m] = list[i][m]
                        }
                        return
                    } else if (list[i].children.length > 0) {
                        this.findNode(id, list[i].children)
                    }
                }
            },
            getSelect (formId) {
                $('#' + formId).find('select').each(function () {
                    $(this).val(vm.formList[$(this).attr('name')])
                })
            }
        },
        created () {
            this.initWeb();
            this.validate();
        }
    })

    function menuValueChange () {
        console.log('name: ', $('#edit_form input[name=parentName]').val())
        vm.formList.parentName = $('#edit_form input[name=parentName]').val()
        vm.formList.parentId = $('#edit_form input[name=parentId]').val()
    }

</script>

</html>